<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      // 导航条类组件：导航条是需要发送请求，保存接口数据。
      class Nav extends React.Component {
        constructor() {
          super();
          this.state = {
            navs: [], // 初始值尽量和后面要保存的数据类型保持一致。
          };
        }
        render() {
          console.log("生成虚拟DOM");
          return (
            <div className="nav">
              {this.state.navs.map((nav) => (
                <button>{nav.style_title}</button>
              ))}
            </div>
          );
        }
        // componentDidMount(): 生命周期函数，组件被渲染为真实DOM时，自动执行。
        componentDidMount() {
          console.log("渲染真实DOM");
          fetch(
            "https://www.lanqb.com/api/course/course-group-list?course_style=1"
          )
            .then((response) => response.json())
            .then(({ course_style }) => {
              console.log(course_style);
              // this.setState()会触发render()渲染函数重新渲染
              this.setState({
                navs: course_style,
              });
            });
        }
      }
      // 声明课程组件
      class Course extends React.Component {
        constructor() {
          super();
          this.state = {
            courseLists: [],
          };
        }
        render() {
          return (
            <div className="course">
              {this.state.courseLists.map((c) => (
                <CourseItem course={c} />
              ))} 
            </div>
          );
        }
        componentDidMount() {
          fetch(
            "https://www.lanqb.com/school/professional?status=show&limit=20&page=1&course_style_ids=&weight=desc"
          )
            .then((response) => response.json())
            .then(({ data }) => {
              // this.setState()会触发render()渲染函数重新渲染
              this.setState({
                courseLists: data,
              });
            });
        }
      }
      function CourseItem(props) {
        return (
          <div>
            <p>标题：{props.course.title}</p>
          </div>
        );
      }

      function App() {
        return (
          <div className="app">
            <Nav />
            <hr />
            <Course />
          </div>
        );
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
